
<template>

    <div class="send-box">
     <textarea class="send-msg send-body" ref="text-msg" placeholder="shift+回车是换行" v-model="message" @keydown.enter.exact.prevent="handle_send"></textarea>
    <send_btn class="send-btn" :isSend="isSend" @click="handle_send" ref="sendBtn"></send_btn>
  </div>

</template>

<style >
.send-btn
{
  margin-left: 40px;
}
.send-box
{
  bottom: 20px;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-top: 10px;
}
.send-body
{

  font-family: PingFang SC;
  font-style: normal;
  height: auto;
  max-height: 370px;
  width: 80%;
  background-color: #FFFFFF;
  padding: 10px;
  border-radius: 15px;
  border-style: solid;
  border-width: 0.7px;
  border-color: #578aef;
  resize: none;
  outline: none;
  scrollbar-width: none;
  box-sizing: border-box;
  box-shadow: 3px 3px 12px 2px #6f8fd096;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;

}
.send-msg
{
  font-size: 21px;
  caret-color: #2454ff;
}
.send-body:focus{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

</style>

<script >
import send_btn from "@/components/send-button.vue";
import {ElMessage} from "element-plus";
export default
{
  components:
      {
        send_btn
      },
  props:{
    isSend:Boolean
  },
  data(){
    return{
      message:'',
      canSend:true,
    }
  },
  methods:
      {
        //发送完内容后回复输入框高度
        recover_input()
        {

          const textarea =this.$refs["text-msg"];
          textarea.style.height="auto";
        },
        input_style()
        {
          const textarea =this.$refs["text-msg"];
          const maxHeight = 340; // 设置最大高度
          textarea.addEventListener('input', function () {
            // 重置高度以适应内容
            textarea.style.height = 'auto';

            // 如果内容高度大于最大高度，则设置高度为最大高度并启用滚动条
            if (textarea.scrollHeight > maxHeight) {
              textarea.style.height = maxHeight + 'px';
              textarea.style.overflowY = 'scroll';
            } else {
              // 否则，设置高度以适应内容，并禁用滚动条
              textarea.style.height = textarea.scrollHeight + 'px';
              textarea.style.overflowY = 'hidden';
            }
          });
        },
        handle_send(){
          if(this.canSend){
            if( this.message.trim()==='')
            {
              ElMessage.info('内容不能为空');
              return;

            }
            this.canSend=false;
            this.$emit('send_message',this.message);
            this.message='';
            this.recover_input();

          }
          else {
            ElMessage({
              message:'请等待消息回复哦...',
              type:'message'
            })
            return;
          }

        }
      },
  mounted() {
        this.input_style();
      }
}



</script>